import React, { useCallback, useEffect, useState } from 'react'

// css
import '../../style/login.less'

// antd
import { Form, Input, Button, Checkbox, notification } from 'antd';

// axios
import { loginAsync, loginTokenGET } from '../../api/user';

// store
import { connect, useSelector } from 'react-redux';
import { loginAsyncAction } from '../../actions/user';

// cmd5
import CryptoJS from 'crypto-js';

function Login(props) {
  // 注册 基本信息
  // 实现自动填入 上次登录时的账户信息
  const userInput =  useSelector((state) => state.user.username)


  // 都不为空
  const onFinish = useCallback((values) => {
    console.log('Success:', values);

    // 前端实现对密码进行 MD5 编码处理
    values.password = CryptoJS.MD5(values.password).toString()

    if (values.remember) {
      props.login(values)
    } else {
    // 提醒同意员工手册
      notification['warning']({
        message: '温馨提醒',
        description:
          '请同意员工手册后再继续操作.',
      });
    }
  }, [])

  // 未输入输入框内容提示
  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  }

  return (
    <div className='bg'>
      <div className="bgBlack">
      </div>
      <div className="loginBox">
        <section className="hero is-info heroBg" style={{borderRadius: '15px'}}>
          <div className="hero-body">
            <p className="title">
                栗子小店
            </p>
            <p className="subtitle">
                ——给每个客户带来美好的一天
            </p>
          </div>
        </section>
        <Form
          className='formBox'
          name="basic"
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}
          initialValues={{ remember: true, username: userInput }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          autoComplete="off"
          style={{marginTop: '30px'}}
        >
          <Form.Item
            label="管理员账号"
            name="username"
            rules={[{ required: true, message: '请输入你的账户 !' }]}
          >
            <Input />
          </Form.Item>

          <Form.Item
            label="管理员密码"
            name="password"
            rules={[{ required: true, message: '请输入你的密码 !' }]}
          >
            <Input.Password />
          </Form.Item>

          <Form.Item name="remember" valuePropName="checked" wrapperCol={{ offset: 8, span: 16 }}>
            <Checkbox><span style={{color: '#fff'}}>同意员工手册</span></Checkbox>
          </Form.Item>

          <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
            {/* <Button type="primary" htmlType="submit">
              登陆
            </Button> */}
            <Button type="primary" htmlType="submit" shape="round" >
              登录
            </Button>
          </Form.Item>
        </Form>
      </div>
    </div>
  )
}

// 映射store
const mapStateToProps = null
// mapDispatchToProps 可以是对象或函数的结构，如果是对象结构，则
// 直接会将对象的各属性合并到包裹组件的 props 中，如果是函数，则将
// 函数返回的对象中各属性合并到包裹组件的 props 中
const mapDispatchToProps = {
  login: loginAsyncAction,
}

export default connect(mapStateToProps, mapDispatchToProps)(Login)
